<template>
    <div class="comment-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <!-- 面包屑路径导航 -->
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>评论管理</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 面包屑路径导航 -->
            </div>
            <el-table class="table-list" :data="articles" style="width: 100%" stripe>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="total_comment_count" label="总评论数">
                </el-table-column>
                <el-table-column prop="fans_comment_count" label="粉丝评论数">
                </el-table-column>
                <el-table-column prop="" label="状态">
                    <template slot-scope="scope">
                        <span>{{ scope.row.comment_status ? '正常' : '关闭'}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="操作">
                    <template slot-scope="scope">
                        <el-switch :disabled="scope.row.statusDisabled" @change="onStatusChange(scope.row)" v-model="scope.row.comment_status" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </template>
                </el-table-column>
            </el-table>
            <!--
                 绑定页码
                 绑定每页大小
                 current-page 控制激活的页码， 默认为第一页
                 page-sizes 控制可选的每页大小
            -->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[10, 20, 30, 40]" :page-size.sync="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" />
           
        </el-card>

    </div>
</template>

<script>
import { getArticle,updateCommentStatus } from "@/api/article";
export default {
    name: "CommentIndex",
    data() {
        return {
            articles: [], //文章数据列表
            totalCount:0, //总数据条数
            pageSize:10,
            page:1,//当前激活的页码
        };
    },
    created() {
        this.loadArticles();
    },

    methods: {
        loadArticles(page=1) {
            this.page = page;
            getArticle({
                response_type: "comment",
                page,
                per_page:this.pageSize
            }).then((res) => {
                const results = res.data.data.results;
                results.forEach(item=>{
                    item.statusDisabled = false;
                })
                 this.articles = results;
                 this.totalCount = res.data.data.total_count;
            });
        },
        onStatusChange(article){
          article.statusDisabled = true
          updateCommentStatus(article.id.toString(),article.comment_status).then(res=>{
              console.log(res)
              article.statusDisabled = false
              this.$message({
                  type:'success',
                  message:article.comment_status ? '开启文章评论状态': '关闭文章评论状态'
              })
          })
        },
        handleSizeChange(val) {
           this.loadArticles(1)
        },
        handleCurrentChange(page) {
            this.loadArticles(page)
        },
    },
};
</script>

<style scoped>
.table-list {
    margin-bottom: 30px;
}
</style>